<template>
  <div class="main-layout">
    <!-- 顶部导航栏 -->
    <header class="header xhs-navbar">
      <div class="header-content">
        <!-- Logo -->
        <div class="logo" @click="$router.push('/')">
          <h2 class="gradient-text">小红书</h2>
        </div>
        
        <!-- 搜索框 -->
        <div class="search-box">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索你感兴趣的内容..."
            class="search-input"
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
        
        <!-- 右侧菜单 -->
        <div class="header-actions">
          <template v-if="authStore.isLoggedIn">
            <!-- 发布按钮 -->
            <el-button 
              type="primary" 
              class="publish-btn"
              @click="$router.push('/create')"
            >
              <el-icon><Plus /></el-icon>
              发布
            </el-button>
            
            <!-- 用户菜单 -->
            <el-dropdown @command="handleCommand">
              <div class="user-menu">
                <el-avatar :size="32" :src="userAvatar">
                  <el-icon><User /></el-icon>
                </el-avatar>
                <span class="username">{{ authStore.user?.username || '用户' }}</span>
                <el-icon><ArrowDown /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="my-content">我的内容</el-dropdown-item>
                  <el-dropdown-item command="profile">个人资料</el-dropdown-item>
                  <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          
          <template v-else>
            <el-button @click="$router.push('/login')">登录</el-button>
            <el-button type="primary" @click="$router.push('/register')">注册</el-button>
          </template>
        </div>
      </div>
    </header>
    
    <!-- 主要内容区域 -->
    <main class="main-content">
      <router-view />
    </main>
    
    <!-- 底部 -->
    <footer class="footer" v-if="showFooter">
      <div class="footer-content">
        <p>&copy; 2024 小红书 - 发现美好生活</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { 
  Search, 
  Plus, 
  User, 
  ArrowDown 
} from '@element-plus/icons-vue'

const router = useRouter()
const authStore = useAuthStore()

const searchKeyword = ref('')
const userAvatar = ref('')

const showFooter = computed(() => {
  return router.currentRoute.value.name !== 'ContentDetail'
})

// 搜索处理
const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    router.push({
      name: 'Search',
      query: { q: searchKeyword.value.trim() }
    })
  }
}

// 下拉菜单命令处理
const handleCommand = (command) => {
  switch (command) {
    case 'my-content':
      router.push('/my-content')
      break
    case 'profile':
      // 个人资料页面（暂未实现）
      console.log('跳转到个人资料')
      break
    case 'logout':
      authStore.logout()
      break
  }
}
</script>

<style scoped lang="scss">
.main-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  height: 60px;
  padding: 0 $spacing-lg;
  position: sticky;
  top: 0;
  z-index: 1000;
  
  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .logo {
    cursor: pointer;
    
    h2 {
      margin: 0;
      font-size: $font-size-xl;
    }
  }
  
  .search-box {
    flex: 1;
    max-width: 400px;
    margin: 0 $spacing-lg;
    
    .search-input {
      border-radius: $border-radius-large;
      
      :deep(.el-input__wrapper) {
        border-radius: $border-radius-large;
      }
    }
  }
  
  .header-actions {
    display: flex;
    align-items: center;
    gap: $spacing-md;
    
    .publish-btn {
      border-radius: $border-radius-large;
    }
    
    .user-menu {
      display: flex;
      align-items: center;
      gap: $spacing-sm;
      padding: $spacing-sm $spacing-md;
      border-radius: $border-radius-large;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        background-color: $secondary-color;
      }
      
      .username {
        font-size: $font-size-sm;
        color: $text-primary;
      }
    }
  }
}

.main-content {
  flex: 1;
  background-color: $bg-light;
}

.footer {
  background: $bg-white;
  border-top: 1px solid $border-light;
  padding: $spacing-lg 0;
  text-align: center;
  
  .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    color: $text-light;
    font-size: $font-size-sm;
  }
}

// 响应式设计
@media (max-width: $breakpoint-md) {
  .header {
    padding: 0 $spacing-md;
    
    .search-box {
      max-width: 250px;
      margin: 0 $spacing-sm;
    }
    
    .header-actions {
      gap: $spacing-sm;
      
      .publish-btn span {
        display: none;
      }
    }
  }
}

@media (max-width: $breakpoint-sm) {
  .header {
    .logo h2 {
      font-size: $font-size-lg;
    }
    
    .search-box {
      display: none;
    }
    
    .user-menu .username {
      display: none;
    }
  }
}
</style> 